<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    </style>
</head>
<body>
<div id="register">
  <h1>防疫物品在线销售注册界面</h1>
  <el-form ref="form" :model="user" label-width="80px">
    <el-form-item label="账号" prop="account">
      <el-input v-model="user.account" placeholder="请输入账号"
                style="width: 250px"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="user.password" placeholder="请输入密码"
                style="width: 250px" show-password></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="user.name" placeholder="请输入姓名"
                style="width: 250px"></el-input>
      <el-tag type="danger">管理员用户不用填写</el-tag>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="user.phone" placeholder="请输入电话"
                style="width: 250px"></el-input>
      <el-tag type="danger">管理员用户不用填写</el-tag>
    </el-form-item>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="user.address" placeholder="请输入地址"
                style="width: 250px"></el-input>
      <el-tag type="danger">管理员用户不用填写</el-tag>

    </el-form-item>

    </el-form-item>
    <el-form-item label="用户身份" prop="flag">
      <el-radio-group v-model="user.flag">
        <el-radio label="管理员"></el-radio>
        <el-radio label="普通用户"></el-radio>
      </el-radio-group>
      <el-link type="primary" href="/brand-case/login.html">已有账号？请点击登录</el-link>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="registerUser">注册</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>
<script>
  new Vue({
    el: "#register",
    methods: {
      registerUser(){
        axios({
          method:"post",
          url:"http://localhost:8080/brand-case/user/add",
          data:this.user
        }).then(resp =>{
                  if(resp.data == "managerSuccess"){
                    //添加成功
                    // 弹出消息提示
                    this.$message({
                      message: '恭喜你，管理员用户注册成功',
                      type: 'managerSuccess'
                    });
                        }
                  if(resp.data == "normalUserSuccess"){
                    //添加成功
                    // 弹出消息提示
                    this.$message({
                      message: '恭喜你，普通用户注册成功',
                      type: 'normalUserSuccess'
                    });
                  }

          })
      },
      resetForm(){
        this.$refs.form.resetFields();
      }
    },
    data(){
      return {
        user: {
          flag:'',
          account:'',
          password:'',
          name:'',
          address:'',
          phone:''
        }
      }
    }

  })
</script>
</body>
</html>